<template>
  <div class="werapp">
    <div class="heard">
      <van-nav-bar
        title="课程详情"
        left-arrow
        @click-left="$router.push('/index')"
      >
        <template #right>
          <van-icon name="cluster-o" size="18" />
        </template>
      </van-nav-bar>
      <Loading v-if="list == ''" />
      <div class="q1" v-else>
        <div class="heard-item">
          <div class="h1">
            <h1>{{ list.info.title }}</h1>
            <van-icon
              name="star-o"
              size="20"
              @click="status(list)"
              :class="list.info.is_collect == 1 ? 'color' : ''"
            />
          </div>
          <h1 class="color">
            <span class="icon iconfont">&#xe620;</span>{{ list.info.price }}
          </h1>
          <p class="books">
            共{{ list.info.total_periods }}课时 |
            {{ list.info.browse_num }}人已报名
          </p>
        </div>
        <div class="heard-item1">
          <h1>教学团队</h1>
          <div class="heards">
            <div class="img" v-for="item in list.teachers" :key="item.id">
              <img :src="item.teacher_avatar" alt="" />
              <p>{{ item.teacher_name }}</p>
            </div>
          </div>
        </div>
        <div class="heard-item2">
          <h1>课程介绍</h1>
          <div v-html="list.info.course_details">{{}}</div>
        </div>
        <div class="heard-item2">
          <h1>课程大纲</h1>
          <p>{{ list.info.course_statement }}</p>
        </div>
        <div class="envelope">
          <span class="icon iconfont">&#xe61b;</span>
        </div>
        <div class="footer">立即报名</div>
      </div>
    </div>
  </div>
</template>


<script>
import { Toast } from "vant";
import { courseInfo,collects, collectss } from "../../request/http";
import Loading from "../commponts/loading.vue";
export default {
  components: {
    Loading,
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    status(v) {
      console.log(v);
      if (v.info.is_collect != 1) {
        collects({course_basis_id:v.info.id,type:1}).then(res=>{
          console.log(res);
          this.list.info.is_collect = 1;
          Toast.success("收藏成功");
        })
        courseInfo(this.$route.query.id).then((res) => {
          console.log(res);
          this.list = res.data;
        });
      } else {
        collectss({ collect_id: v.info.collect_id, type: 1 }).then((res) => {
          console.log(res);
          this.list.info.is_collect = 0;
          Toast.success("取消收藏");
        });
      }
    },
  },
  created() {
    console.log();
    var id = this.$route.query.id;
    courseInfo(id).then((res) => {
      console.log(res);
      this.list = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.werapp {
  height: 1300px;
  background: rgb(242, 243, 245);
}
.heard {
  width: 100%;
  background: rgb(242, 243, 245);
  .heard-item {
    height: 2.827rem;
    padding: 0 40px;
    border: 1px solid #fff;
    background: #fff;
    margin-bottom: 20px;
    .h1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .color {
      color: orange;
    }
    .books {
      font-size: 0.427rem;
      color: #777;
      margin: 0;
    }
  }
  .heard-item1 {
    padding-top: 10px;
    width: 90%;
    padding: 0 40px;
    border: 1px solid #fff;
    background: #fff;
    margin-bottom: 20px;
    .heards {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .img {
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 70%;
          border-radius: 50%;
        }
      }
    }
  }
  .heard-item2 {
    padding-top: 10px;
    width: 90%;
    padding: 0 40px;
    border: 1px solid #fff;
    background: #fff;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }
}
.envelope {
  background: #007aff;
  border-radius: 100%;
  text-align: center;
  line-height: 1.6rem;
  color: #fff;
  position: fixed;
  bottom: 2.133rem;
  right: 0.267rem;
  width: 1.6rem;
  height: 1.6rem;
  z-index: 99999999;
}
.footer {
  width: 100%;
  height: 1.173rem;
  background: #eb6100;
  text-align: center;
  line-height: 1.173rem;
  color: #fff;
  font-size: 0.453rem;
  position: fixed;
  bottom: 0;
}
</style>